<template>
    <div class="home">
        <el-container style="height:100vh">
            <el-header>
                <transition name="el-fade-in-linear">
                    <div v-show="!isCollapse" class="logo">
                        <div>
                            <div class="title-cn">内容管理系统</div>
                            <div class="title-en">Content Management System</div>
                        </div>
                    </div>
                </transition>
                <div class="nv-expand">
                    <el-button @click="isCollapse = !isCollapse" icon="fa fa-navicon fa-lg" circle></el-button>
                </div>
                <div class="v-avatar">
                    <el-badge :hidden="noticeCount <=0 " :value="noticeCount" :max="99" class="item">
                        <i class="fa fa-bell fa-lg" aria-hidden="true"></i>
                    </el-badge>
                    <el-dropdown @command="logout">
                        <el-button>
                            {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="logout">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>
            <el-container>
                <el-aside :style="menuStyle">
                    <transition name="el-collapse-transition">
                        <el-menu :collapse="isCollapse" :router="true">
                            <el-menu-item index="/">
                                <i class="menu-ico fa fa-home fa-lg"></i>
                                <span class="menu-title" slot="title">主页</span>
                            </el-menu-item>
                            <el-submenu index="/system-manage">
                                <div slot="title">
                                    <i class="menu-ico fa fa-cog fa-lg"></i>
                                    <span class="menu-title">系统管理</span>
                                </div>
                                <el-menu-item index="/users">用户管理</el-menu-item>
                                <el-menu-item index="/system-manage">权限管理</el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </transition>
                </el-aside>
                <el-container>
                    <el-main>
                        <router-view></router-view>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    // @ is an alias to /src
    import HelloWorld from "@/components/HelloWorld.vue";

    export default {
        name: "home",
        components: {
            HelloWorld
        },
        methods: {
            logout: function () {
                let that = this;
                this.$http.post('/logout');
                that.$store.commit("logout")
                that.$router.replace("/login");

            }
        },
        data(){
            return{
                username:'admin',
                isCollapse:false,
                noticeCount:0
            }
        },
        computed: {
            menuStyle: function() {
                return {
                    overflow: 'hidden',
                    width: this.isCollapse ? '65px !important' : '200px !important'
                }
            },
        }
    };
</script>

<style lang="less">
    @whiteColor: #fefefe;
    @blackColor: #333;
    .el-header {
        position: relative;
        padding-left: 0!important;
        width: 100%;
        color: @whiteColor;
        text-align: center;
        line-height: 60px;
        background-color: rgb(63, 81, 181) !important;
        border-color: #3f51b5 !important;
        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12) !important;
        z-index: 99;
        display: flex;
        .logo {
            text-align: left;
            width: 200px;
            line-height: 10px;
            background-color: #193a9a !important;
            border-color: #193a9a !important;
            display: flex;
            align-items: center;
            .toplogo {
                margin: 0 5px 0 3px;
                img {
                    width: 25px;
                }
            }
            .title-cn {
                line-height: 20px;
                font-family: PingFangSC-Semibold;
                font-size: 12px;
                color: #FFFFFF;
                letter-spacing: 1px;
            }
            .title-en {
                line-height: 20px;
                font-size: 9px; // letter-spacing: 0.75px;
            }
        }
        .nv-expand {
            .el-button {
                margin-left: 12px;
                width: 42px;
                height: 42px;
                background-color: #3f51b5;
                color: #fefefe;
                border: none;
                &:hover {
                    background-color: rgba(63, 58, 159, .9);
                }
            }
        }
        .v-avatar {
            display: flex;
            vertical-align: middle;
            justify-content: flex-end;
            position: absolute;
            right: 20px;
            top: 10px;
            width: 500px;
            height: 40px;
            line-height: 40px;
            .el-badge {
                margin: 0 40px;
            }
            .el-badge__content.is-fixed {
                top: 10px;
            }
            .avatar {
                width: 40px;
                height: 40px;
                max-width: 100%;
                border-radius: 20px;
            }
            .el-button {
                background-color: #3f51b5;
                color: #fefefe;
                border: none;
            }
        }
    }
    .el-aside {
        background-color: @whiteColor;
        color: @blackColor;
        text-align: left; // width: auto !important;
        min-height: calc(100vh - 60px);
        .menu-ico {
            vertical-align: middle;
            margin-right: 5px;
            width: 24px;
            text-align: center;
            font-size: 18px;
        }
        .menu-title {
            margin-left: 10px;
        }
        .el-menu {
            height: 100%;
        }
        .el-submenu {
            .el-menu-item {
                text-align: center;
            }
        }
    }
    .el-main {
        background-color: @whiteColor;
        text-align: left;
    }
</style>